<template>
  <view class="index-page">
    <u-navbar
      title="作者详情"
      :background="{ background: '#111723' }"
      title-color="#fff"
      :title-bold="true"
      back-icon-color="#fff"
      :border-bottom="false"
    ></u-navbar>

    <view class="author">
      <image :src="state.author.avatar_image" mode=""></image>
      <view style="width: 500rpx">
        <view style="margin-bottom: 10rpx" class="text">{{
          state.author.name
        }}</view>
        <rich-text
          class="rich"
          :nodes="state.author.profile_content"
        ></rich-text>
      </view>
    </view>
    <scroll-view
      class="scrool"
      :style="{ height: '1320rpx' }"
      :scroll-y="true"
      lower-threshold="30"
      @scrolltolower="bottomOut()"
    >
      <view class="wrap">
        <collections-card
          v-for="(item, index) in state.list"
          :key="index"
          @click="collectionsClick(item)"
          :type="'0'"
          :obj="item"
          :isauthor="'yes'"
        />
      </view>
      <u-loadmore
        :status="state.status"
        icon-type="flower"
        margin-top="30"
        margin-bottom="30"
      />
    </scroll-view>
  </view>
</template>
<script lang="ts" setup>
import { getAuthorCollectionList } from '@/api/modules/user'
import { onLoad } from '@dcloudio/uni-app'
import CollectionsCard from '@/pages/market/components/CollectionsCard.vue'
import { reactive } from 'vue'
const state = reactive({
  type: '', //区分藏品0盲盒1寄售2
  id: '', ///藏品id
  status: 'loadmore',
  list: [] as any,
  page: 0,
  author: {} as any
})

onLoad((options) => {
  console.log(options)
  state.id = options.id as string
  bottomOut()
})

//触底加载数据
const bottomOut = () => {
  if (state.status === 'nomore') return
  state.status = 'loading'
  state.page = ++state.page
  getAuthorCollectionList({
    page: state.page,
    page_size: 10,
    author_id: state.id
  }).then((result) => {
    state.author = result.data.info
    state.list.push(...result.data.list.data)
    if (result.data.list.data.length < 10) state.status = 'nomore'
    else state.status = 'loading'
  })
}
</script>
<style lang="less" scoped>
.author {
  display: flex;
  align-items: center;
  padding: 20rpx 20rpx 10rpx 40rpx;
  justify-content: space-around;
  color: #fff;
  // white-space: nowrap;
  // text-overflow: ellipsis;
  // text-align: left;
  height: 200rpx;
  .text {
    color: #fff;
    font-size: 30rpx;
  }
  .rich {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  image {
    width: 130upx;
    height: 130upx;
    margin-top: 17upx;
    border-radius: 50%;
  }
}
.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 20rpx;
}
</style>
